<template>
  <div class="serviceInfoContainer">
    <Layout>
      <Header class="layoutHeader">
        <span class="returnText" @click="returnServiceDirectory"
          ><Icon type="md-return-left" />&nbsp;返回资源目录</span
        >
      </Header>
      <Layout>
        <Sider width="450" class="layoutSider">
          <Card :padding="34" class="serviceInfoCard">
            <div style="text-align: center">
              <img :src="thumbUrl" style="width: 280px; height: 160px" />
              <span class="title">{{ title }}</span>
              <div class="serviceOperation">
                <span class="operationTitle">服务操作</span>
                <div class="operationContent">
                  <span class="operationContentItem" @click="serverPreview"
                    >1、服务预览</span
                  >
                  <span class="operationContentItem">2、添加到在线智图</span>
                </div>
              </div>
            </div>
          </Card>
        </Sider>
        <Content class="layoutContent">
          <Row :gutter="50">
            <Col span="12">
              <div class="infoContentTitleContainer">
                <span class="infoContentTitile">服务基本信息</span>
              </div>
              <div class="infoContentContainer">
                <Col span="4" class="infoContentItemTitle">服务URL：</Col>
                <Col span="20" class="infoContentItem"
                  ><a :href="url" target="_blank">{{ url }}</a></Col
                >
                <Col span="4" class="infoContentItemTitle"> 服务名称： </Col>
                <Col span="20" class="infoContentItem">{{ title }}</Col>
                <Col span="4" class="infoContentItemTitle"> 服务简介： </Col>
                <Col span="20" class="infoContentItem">{{ desc }}</Col>
                <Col span="4" class="infoContentItemTitle"> 关键字： </Col>
                <Col span="20" class="infoContentItem">{{ keywords }}</Col>
                <Col span="4" class="infoContentItemTitle"> 服务类型： </Col>
                <Col span="20" class="infoContentItem">{{ type }}</Col>
                <Col span="4" class="infoContentItemTitle"> 主题分类： </Col>
                <Col span="20" class="infoContentItem">{{ themeClass }}</Col>
                <Col span="4" class="infoContentItemTitle"> 坐标系： </Col>
                <Col span="20" class="infoContentItem">{{ coordinate }}</Col>
                <Col span="4" class="infoContentItemTitle"> 投影类型： </Col>
                <Col span="20" class="infoContentItem">{{ projection }}</Col>
                <Col span="4" class="infoContentItemTitle"> 发布时间： </Col>
                <Col span="20" class="infoContentItem">{{ publishDate }}</Col>
                <Col span="4" class="infoContentItemTitle">
                  上次更新时间：
                </Col>
                <Col span="20" class="infoContentItem">{{
                  lastUpdateTime
                }}</Col>
                <Col span="4" class="infoContentItemTitle"> 更新周期： </Col>
                <Col span="20" class="infoContentItem">{{ updateCycle }}</Col>
                <Col span="4" class="infoContentItemTitle"> 服务范围： </Col>
                <Col span="20" class="infoContentItem">
                  <Col span="4" class="infoContentItem">左上角经度：</Col>
                  <Col span="20" class="infoContentItem">{{
                    extent.topLeftLon
                  }}</Col>
                  <Col span="4" class="infoContentItem">左上角纬度：</Col>
                  <Col span="20" class="infoContentItem">{{
                    extent.topLeftLat
                  }}</Col>
                  <Col span="4" class="infoContentItem">右下角经度：</Col>
                  <Col span="20" class="infoContentItem">{{
                    extent.bottomRightLon
                  }}</Col>
                  <Col span="4" class="infoContentItem">右下角纬度：</Col>
                  <Col span="20" class="infoContentItem">{{
                    extent.bottomRightLat
                  }}</Col>
                </Col>
              </div>
            </Col>
            <Col span="12">
              <div class="infoContentTitleContainer">
                <span class="infoContentTitile">服务联系信息</span>
              </div>
              <div class="infoContentContainer">
                <Col span="4" class="infoContentItemTitle"> 发布机构： </Col>
                <Col span="20" class="infoContentItem">{{
                  publishOrganization
                }}</Col>
                <Col span="4" class="infoContentItemTitle"> 地址： </Col>
                <Col span="20" class="infoContentItem">{{ address }}</Col>
                <Col span="4" class="infoContentItemTitle"> 网站： </Col>
                <Col span="20" class="infoContentItem">{{ website }}</Col>
                <Col span="4" class="infoContentItemTitle"> 联系人： </Col>
                <Col span="20" class="infoContentItem">{{ contactPeople }}</Col>
                <Col span="4" class="infoContentItemTitle"> 联系人电话： </Col>
                <Col span="20" class="infoContentItem">{{ contactPhone }}</Col>
                <Col span="4" class="infoContentItemTitle"> 联系人邮箱： </Col>
                <Col span="20" class="infoContentItem">{{ contactMail }}</Col>
              </div>
            </Col>
          </Row>
        </Content>
      </Layout>
    </Layout>
    <Modal v-model="isModelShow" title="服务预览" width="70" footer-hide>
      <div id="viewDiv"></div>
    </Modal>
  </div>
</template>
<style scoped>
.serviceInfoContainer {
  padding: 20px;
}
.layoutHeader {
  height: 36px;
}
.returnText {
  line-height: 36px;
  color: rgba(48, 128, 254, 1);
  font-size: large;
  font-weight: bold;
  position: relative;
  left: 30px;
  cursor: pointer;
}
.layoutSider {
  padding: 10px 50px;
  background-color: #f8f8f9;
}
.title {
  text-align: left;
  display: block;
  margin-top: 10px;
  font-size: large;
  font-weight: bold;
}
.serviceOperation {
  text-align: left;
  margin-top: 80px;
}
.operationTitle {
  font-size: large;
  color: rgba(56, 71, 80, 1);
  border-left: solid 5px #0090ff;
  padding-left: 10px;
}
.operationContent {
  margin-top: 20px;
}
.operationContentItem {
  display: block;
  color: rgba(48, 128, 254, 1);
  cursor: pointer;
}
.layoutContent {
  padding: 10px;
  width: 100%;
}
.infoContentContainer {
  word-break: break-all;
}
.infoContentItemTitle,
.infoContentItem {
  margin-top: 15px;
}
.infoContentTitile {
  color: rgba(56, 71, 80, 1);
  font-size: large;
  font-weight: bold;
}
.infoContentItemTitle {
  font-weight: bold;
}
</style>
<script>
import $ from "jquery";
import config from "../config";

import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import MapImageLayer from "@arcgis/core/layers/MapImageLayer";
export default {
  name: "ServiceInfo",
  data() {
    return {
      address: "",
      contactMail: "",
      contactPeople: "",
      contactPhone: "",
      coordinate: "",
      desc: "",
      extent: {
        bottomRightLat: "",
        bottomRightLon: "",
        topLeftLat: "",
        topLeftLon: "",
      },
      keywords: "",
      lastUpdateTime: "",
      projection: "",
      publishDate: "",
      publishOrganization: "",
      themeClass: "",
      thumbUrl: "",
      title: "",
      type: "",
      updateCycle: "",
      url: "",
      website: "",
      isModelShow: false,
      loadLayer: null,
    };
  },
  methods: {
    getHeight() {
      $(".serviceInfoCard").height(window.innerHeight - 180);
    },
    getServiceInfo() {
      const serviceInfo = JSON.parse(sessionStorage.getItem("serviceInfo"));
      this.address = serviceInfo.publishInfo.address;
      this.contactMail = serviceInfo.contactInfo.mail;
      this.contactPeople = serviceInfo.contactInfo.person;
      this.contactPhone = serviceInfo.contactInfo.phone;
      this.coordinate = serviceInfo.coordinate;
      this.desc = serviceInfo.desc;
      this.extent = serviceInfo.extentInfo;
      this.keywords = serviceInfo.keywords.join("、");
      this.lastUpdateTime = serviceInfo.lastUpdateDate;
      this.projection = serviceInfo.projection;
      this.publishDate = serviceInfo.publishDate;
      this.publishOrganization = serviceInfo.publishInfo.organization;
      this.themeClass = serviceInfo.themeClass;
      this.thumbUrl = serviceInfo.thumb;
      this.title = serviceInfo.title;
      this.type = serviceInfo.type;
      this.updateCycle = serviceInfo.updateCycle;
      this.url = serviceInfo.url;
      this.website = serviceInfo.publishInfo.website;
    },
    returnServiceDirectory() {
      this.$router.push("zyml");
    },
    initMap() {
      const self = this;
      let map = new Map();
      let view = new MapView({
        container: "viewDiv",
        map: map,
      });
      let layer = new MapImageLayer();
      self.loadLayer = function (url) {
        layer.url = url;
        map.removeAll();
        map.add(layer);
      };
    },
    serverPreview() {
      $("#viewDiv").height(window.innerHeight * 0.7);
      this.loadLayer(this.url);
      this.isModelShow = true;
    },
    //todo 接口存在问题
    addPortal() {
      let username = sessionStorage.getItem("name");
      this.$.post(
        `${config.portalConfig.portalRestPreUrl}content/users/${username}/additem`,
        {
          token: sessionStorage.getItem("portalToken"),
          url: this.url,
          title: this.title,
          // type:this.type
          type: "Map Service",
          serviceUsername: username,
          servicePassword: JSON.parse(sessionStorage.getItem("selfInfo"))
            .portalPassword,
          f: "json",
        }
      ).done((res) => {
        if (res.success) {
          this.$.post(
            `${config.portalConfig.portalRestPreUrl}content/users/${username}/publish`,
            {
              token: sessionStorage.getItem("portalToken"),
              itemid: res.id,
              filetype: "mapService",
              publishParameters: JSON.stringify({ name: this.title }),
              f: "json",
            }
          ).done((res) => {
            console.log(res);
          });
        }
      });
    },
  },
  mounted() {
    this.getHeight();
    this.getServiceInfo();
    this.initMap();
  },
};
</script>
